<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <base href="<%=basePath%>">
    
    <title>energyStatistics</title>
	<jsp:include page="../analysisInclude.jsp"></jsp:include>


</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12">
            <div>
              <ul class="nav nav-tabs" role="tablist">
                <li id="dateLi" role="presentation" class="active" style="width: 33.333%;"><a id="aDate" href="#date" aria-controls="date" role="tab" data-toggle="tab">每日</a></li>
                <li id="monthLi" role="presentation" style="width: 33.333%;"><a id="aMonth" href="#month" aria-controls="month" role="tab" data-toggle="tab">每月</a></li>
                <li id="yearLi" role="presentation" style="width: 33.333%;"><a id="aYear" href="#year" aria-controls="year" role="tab" data-toggle="tab">每年</a></li>
              </ul>
              <div class="tab-content" >
                <div role="tabpanel" class="tab-pane active" id="date">
                    <div id="dateLineContainer" style="width: 1000px;height:950px;"></div>
                </div>
                <div role="tabpanel" class="tab-pane" id="month">
                    <div id="monthLineContainer" style="width: 1000px;height:950px;">month</div>
                </div>
                <div role="tabpanel" class="tab-pane" id="year">
                    <div id="yearLineContainer" style="width: 1000px;height:950px;">year</div>
                </div>
              </div>
              <div id="hourLineContainer" style="width: 1000px;height:400px;margin-top: 30px;"></div>
            </div>
        </div>
      </div>
    </div>

	<input type="hidden" id="ProjectCode" value="${ProjectCode}"/>


    <script type="text/javascript">
    var path = "<%=path%>";
    var ProjectCode = $('#ProjectCode').val();
    var myChartLine = "";
    var myChartBar = "";
    var optionLine = "";
    var optionBar = "";
    var InitDate = "";
    
    $(function () {
    	InitDate = dateFormatter(new Date());
        //默认初始化日数据
        $("#aDate").trigger("click");
    });
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    $("#aDate").on("click",function() {
        initLineEchart("dateLineContainer",path+"/resource/jsonData/nhtj/dateData.json",path+"/resource/jsonData/nhtj/dateData.json");
        getHourEchart(ProjectCode,"1",InitDate,path+"/resource/jsonData/nhtj/dateData.json")
    }); 

    $("#aMonth").on("click",function() {
        initLineEchart("monthLineContainer",path+"/resource/jsonData/nhtj/monthData.json",path+"/resource/jsonData/nhtj/monthDateData.json");
        getDateEchart("201709",path+"/resource/jsonData/nhtj/monthDateData.json")
    }); 

    $("#aYear").on("click",function() {
        initLineEchart("yearLineContainer",path+"/resource/jsonData/nhtj/yearData.json",path+"/resource/jsonData/nhtj/monthData.json");
        getMonthEchart("2017",path+"/resource/jsonData/nhtj/monthData.json")
    }); 
    
    function dateFormatter(value) {
    	var date = new Date(value);
    	var Y= date.getFullYear() + '-';
    	var M = (date.getMonth()+ 1) < 10 ?'0'+ (date.getMonth()+1) + '-':(date.getMonth()+1)+'-';
    	var D = date.getDate()< 10 ?'0' +  date.getDate(): date.getDate();
    	return Y+M+D;
    }

    /*************************初始化 line echart**************************/
    function initLineEchart(divContainer,jsonData,jsonData2) {
    	var domEchart = document.getElementById(divContainer);
        myChartLine = echarts.init(domEchart);
        optionLine = null;

        optionLine = {
            grid:{
                top:130
            },
            title: {
                text: '能耗统计',
                textStyle: {
                	fontSize: '28'
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
            },
            dataZoom: [{
                 type: 'inside',
                 realtime: true,
                 start: 60,
                 end:100
             }],
            calculable: true,
            xAxis: {
                type: 'category',//boundaryGap: false,//取消左侧的间距
                data: [],
                axisLabel: {        
                    textStyle: {
                        fontSize:'20'
                    }
                }
            },
            yAxis: {
                name : 'KW.h',
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        fontSize:'20'
                    }
                }
            },
            series: [{
                name:'能耗统计',
                type:'line',
                smooth:true,
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                }
            }]
        };

        //数据加载完之前先显示一段简单的loading动画
        myChartLine.showLoading();  
        setTimeout(setLineData(jsonData) ,500);
        
        myChartLine.on('click', function (params) {
            //console.log(params.name);
           if( domEchart.id == "dateLineContainer"){
        	   getHourEchart(ProjectCode,"1",params.name)
           }else if( domEchart.id == "monthLineContainer"){
        	   getDateEchart(params.name,jsonData2)
           }else if( domEchart.id == "yearLineContainer"){
        	   getMonthEchart(params.name,jsonData2)
           }
            
        });  

    }

    /*************************end line echart**************************/

    /*************************初始化 line data**************************/
    function setLineData(jsonData) {
        //声明数据数组
        var categoriesArrary = new Array();
        var dataArrary1 = new Array();

        // 异步加载数据
        $.get(jsonData).done(function (data) {
            //var bToObj=JSON.parse(data); //json字符串转json数组
            $.each(data.tj,function(index,item){
                //console.log(item);
                categoriesArrary.push(item.categories);//循环取出类别并填入类别数组
                dataArrary1.push(item.data);//循环取出数据并填入类别数组
            });

            //console.log(categoriesArrary);
            myChartLine.hideLoading(); //隐藏加载动画
            myChartLine.setOption({//加载数据图表
                xAxis: {
                    data: categoriesArrary
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '能耗统计',
                    data: dataArrary1
                }]
            });
        });

        if (optionLine && typeof optionLine === "object") {
            myChartLine.setOption(optionLine, true);
        }
    }

     /****************************end line data**************************/

     /*************************hour line echart**************************/
     function getHourEchart(ProjectCode,DeviceID,date){
            $.ajax({
    	        type : "post",
    	        url: "http://202.105.104.105:8804/energy/get?AccessToken=bd4f1ce1b544463094726ebc23a6c9f1",
    	        async:true,
    	        data:{
    	          'ProjectCode':ProjectCode,
    	          'DeviceID':DeviceID,
    	          'Date':date
    	        },
    	        dataType: 'json',
    	        success: function(data){
    			      var collectTimeArrary = new Array();
    			      var collectDataArrary = new Array();
    	              $.each(data.data,function(i,item){
    	            	   //console.log(item);
    	            	   var time = item.CollectTime;
    	            	   collectTimeArrary.push(time.slice(11,19));
    				       collectDataArrary.push(item.CollectData);
    	        	  });
    	               
    				  setTimeout(function () {
    			            fetchData(collectTimeArrary,collectDataArrary,date);
    			      }, 50); 
    	         },
    	        error:function(){
    	               console.log("服务中断");
    	        }
    	      })
        }
     /****************************hour line echart end**************************/
     
     /*************************date line echart**********************************/
       function getDateEchart(date,jsonData2){    	      
    	      $.get(jsonData2).done(function (data) {
    	    	  var collectTimeArrary = new Array();
			      var collectDataArrary = new Array();
    	    	  $.each(data,function(index,array){
    	    		  if(date == index){
    	    			  $.each(array,function(index,item){
	        	    		  collectTimeArrary.push(item.categories);
	        	    		  collectDataArrary.push(item.data);
    	    			  });
    	    		  }
    	            });
    	    	  setTimeout(function () {
			            fetchData(collectTimeArrary,collectDataArrary,date);
			      }, 50); 
    	      });
        }
     
     /*************************date line echart end******************************/
     
     /*************************month line echart**********************************/
     function getMonthEchart(date,jsonData2){    	      
    	      $.get(jsonData2).done(function (data) {
    	    	  var collectTimeArrary = new Array();
			      var collectDataArrary = new Array();
    	    	  $.each(data.tj,function(index,item){
    	    		  collectTimeArrary.push(item.categories);
    	    		  collectDataArrary.push(item.data);
    	          });
    	    	  setTimeout(function () {
			            fetchData(collectTimeArrary,collectDataArrary,date);
			      }, 50); 
    	      });
        }
     
     /*************************month line echart end******************************/
     
    var dom = document.getElementById("hourLineContainer");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    
    function fetchData(collectTimeArrary,collectDataArrary,date) {
            myChart.setOption({
                title: {
                    subtext: date,
                    subtextStyle: {
                    	fontSize: '20'
                    }
                },
                xAxis: {
                    data: collectTimeArrary
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '能耗详情',
                    data: collectDataArrary
                }]
            });

    }

    // 初始 option
    option = {
        grid:{
            top:100
        },
        title: {
            text: '能耗详情',
            textStyle: {
            	fontSize: '28'
            }
        },
        tooltip: {
        	trigger: 'axis'
        },
        legend: {
        },
        dataZoom: [{
             type: 'inside',
             realtime: true,
             start: 70,
             end:100
         }],
        calculable: true,
        xAxis: {
            data: [],
            axisLabel: {        
                textStyle: {
                    fontSize:'20'
                }
            }
        },
        yAxis: {
            name : 'KW.h',
            type: 'value',
            axisLabel: {
            	textStyle: {
                    fontSize:'20'
                },
                formatter: '{value}'
            }
        },
        series: [{
            name: '能耗',
            type: 'line',
            smooth:true,
            data: []
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    } 
   

    </script>
</body>
</html>